<template>
  <div class="RecodTimeLine">
    <div class="RecodTimeLine--title">
      <span>{{record.title}}</span>
    </div>
    <div class="RecodTimeLine--list">
      <div class="RecodTimeLine--list__item" v-for="(item, i) in record.guardTourHistory" :key="item.time + i">
        <div class="left">{{item.time}}</div>
        <div class="center">
          <div class="center--img">
            <img src="@/assets/images/armyScreen/巡更记录_点@2x.png"/>
          </div>
          <div class="center--line"></div>
        </div>
        <div class="right">{{item.location}}</div>
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  record: {
    type: Object,
    default() {
      return {
        "title": "安保部队巡查路线",
        "guardTourHistory": [
          {
            "time": "2023-10-09 11:10:12",
            "location": "1号油料库"
          },
          {
            "time": "2023-10-09 12:10:12",
            "location": "2号油料库"
          }
        ]
      }
    }
  }
})
</script>

<style lang="scss" scoped>
.RecodTimeLine {
  &--title {
    position: relative;
    padding-left: 12px;
    margin-bottom: 8px;

    &::before {
      position: absolute;
      top: 8px;
      left: 0;

      display: inline-block;
      content: '';

      width: 3px;
      height: 16px;
      background-image: linear-gradient(180deg, #00C5FF 0%, #0093FF 100%);
      box-shadow: 0px 2px 4px 0px rgba(0, 150, 255, 1);
      box-shadow: 0px 2px 10px 0px rgba(0, 151, 255, 1);
      border-radius: 2px;
    }

    height: 32px;
    line-height: 32px;
    font-family: PingFangSC-Medium;
    font-size: 16px;
    color: #D8F0FF;
    letter-spacing: 0;
    font-weight: 500;

  }

  &--list {
    &__item {
      display: flex;
      margin-bottom: 18px;

      .left {
        width: 160px;
        height: 21px;
        opacity: 0.5;
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #D8F0FF;
        letter-spacing: 0;
        line-height: 21px;
        font-weight: 400;
      }

      .center {
        width: 32px;

        &--img {
          width: 32px;
          height: 26px;
          position: relative;

          img {
            width: 100%;
            height: auto;
          }

          &::after {
            position: absolute;
            bottom: -19px;
            left: 16px;
            display: inline-block;
            content: '';
            width: 1px;
            height: 24px;
            border-left: 1px dashed rgba(0, 190, 255, 1);
          }
        }
      }

      .right {
        flex-grow: 1;

        opacity: 0.91;
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #D8F0FF;
        letter-spacing: 0;
        font-weight: 400;
      }

      &:last-child {
        .center {
          &--img {
            &::after {
              display: none;
            }
          }
        }
      }
    }
  }
}
</style>
